<template>
    <div class="order-detail-header-container">

        <div class="timer" v-if="new Date().getTime() <=
            parseInt(info?.submitTime) + 10 * 60 * 1000">
            <div>待支付</div>

            <nut-countdown :end-time="parseInt(info?.submitTime) + 10 * 60 * 1000" :start-time="new Date().getTime()"
                @on-end="TimerOver(info)"></nut-countdown>
        </div>

        <nut-cell>
            <div class="container-top" v-if="info">
                <div class="container-top-row1">
                    <div class="container-top-row1-number">
                        <div> 共{{ info?.seatCount }}张</div>
                        <div class="container-top-row1-copybtn" @click="copyOrder">复 制</div>
                    </div>
                    <div class="img">
                        <image class="img-box" :src="info?.filmPic">
                        </image>
                    </div>
                    <div class="container-top-row1-right">
                        <div class="container-top-row1-right-name">
                            <div class="container-top-row1-right-name-left">
                                {{ info?.filmName }}
                            </div>
                            <div></div>
                        </div>
                        <div class="container-top-row1-right-time">
                            <div>{{ formatShowTime(info?.filmShowTime) }}</div>
                            <div class="container-top-row1-right-time-red">开场</div>
                        </div>
                        <div class="container-top-row1-right-room">
                            {{ info?.showName }}
                        </div>
                        <div class="container-top-row1-right-address">
                            <div class="container-top-row1-right-address-text">
                                {{ info?.cinemaName }}
                            </div>
                        </div>
                        <div class="container-top-row1-right-position">
                            <div v-for="item in seatInfo" style="margin-left: 2px;">{{ item?.seatName }}</div>
                        </div>
                    </div>
                </div>
                <nut-divider />
                <div class="container-top-row2">
                    <div class="container-top-row2-left">
                        <div class="container-top-row2-left-item">
                            <Issue color="#FFC800" />
                            <div class="container-top-row2-left-item-name">不支持退票</div>
                        </div>
                        <div class="container-top-row2-left-item">
                            <Issue color="#FFC800" />
                            <div class="container-top-row2-left-item-name">不支持改签</div>
                        </div>
                    </div>
                </div>
            </div>
        </nut-cell>
    </div>
</template>
<script setup lang="ts">
import { Issue } from "@nutui/icons-vue-taro";
import { computed, toRefs } from "vue";
import Taro from "@tarojs/taro";
import moment from "moment";

const props = defineProps({
    //子组件接收父组件传递过来的值
    info: Object,
    seatInfo: Array
});
//使用父组件传递过来的值
const { info, seatInfo } = toRefs(props);
// 【格式化】座位数据
const formatSeatData = computed(() => {
    return () => {
        const arr = info?.value?.seatData.map((item) => {
            return item.seatNo;
        });
        return arr.join(",");
    };
});
const formatShowTime = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('YYYY-MM-DD HH:mm');
        return formattedTime
        // console.log(formattedTime);
        // return moment.unix(str / 1000).format("HH:mm");
    };
});// 【格式化】散场时间
const TimerOver = (e) => {
    Taro.showToast({
        title: "订单已超时",
        icon: "none",
    });
    setTimeout(() => {
        Taro.navigateBack({
            delta: 1
        });
    }, 500);
};
const copyOrder = () => {
    let seatNO = ''
    seatInfo?.value?.forEach((item) => {
        seatNO += item.seatName + ','
    })
    const str = `${info?.value.filmName}\n${formatShowTime.value(info?.value.filmShowTime)}\n${info?.value.showName} ${info?.value.cinemaName}\n${info?.value.cinemaAddress}\n${seatNO}`;
    Taro.setClipboardData({
        data: str, //要被复制的内容
        success: () => {
            //复制成功的回调函数
            Taro.showToast({
                //提示
                title: "复制成功",
                icon: "none",
            });
        },
    });
}
</script>
<style lang="scss">
.order-detail-header-container {
    position: relative;

    .timer {
        position: absolute;
        z-index: 1;
        bottom: 10%;
        right: 5%;
        color: #5232B7;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;

        .nut-countdown {
            font-size: 24px !important;
            margin-left: 10px;
        }
    }

    display: flex;
    flex-direction: column;

    .container-top {
        flex: 1;

        .nut-divider {
            margin: 24px 0;
            color: #f6f8f9 !important;
            border-color: #f6f8f9 !important;
        }

        .container-top-row1 {
            display: flex;
            position: relative;

            .container-top-row1-number {
                position: absolute;
                top: 5px;
                right: 5px;
                color: #858a99;
                font-size: 24px;
                text-align: center;

                .container-top-row1-copybtn {
                    margin-top: 20px;
                    background-color: rgba(114, 55, 188, 0.8);
                    padding: 5px 15px;
                    color: #fff;
                    font-size: 20px;
                    border-radius: 10px;
                    cursor: pointer;
                }
            }

            .img {
                width: 186px;
                height: 258px;
                overflow: hidden;
                border-radius: 5px;


                .img-box {
                    width: 100%;
                    height: 100%;
                    background-size: 100%;
                }
            }

            .container-top-row1-right {
                font-size: 24px;
                margin-left: 25px;

                .container-top-row1-right-name {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .container-top-row1-right-name-left {
                        font-weight: 500;
                        color: #15181d;
                        font-size: 30px;
                        line-height: 42px;
                        display: -webkit-box;
                        /* autoprefixer: ignore next */
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        margin-bottom: 10px;
                        margin-right: 80px;
                        margin-top: 5px;
                    }

                    .container-top-row1-right-name-right {
                        color: #858a99;
                        font-size: 24px;
                    }
                }

                .container-top-row1-right-time {
                    color: #858a99;
                    font-size: 24px;
                    margin-top: 10px;
                    display: flex;
                    align-items: center;

                    .container-top-row1-right-time-red {
                        margin-left: 10px;
                        color: #5232B7;
                    }
                }

                .container-top-row1-right-position {
                    color: #858a99;
                    font-size: 24px;
                    margin-top: 10px;
                    display: flex;
                    align-items: center;
                }

                .container-top-row1-right-room {
                    color: #858a99;
                    font-size: 24px;
                    margin-top: 10px;
                }

                .container-top-row1-right-address {
                    color: #858a99;
                    font-size: 24px;
                    margin-top: 10px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-right: 80px;

                    .container-top-row1-right-address-text {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        flex: 1;
                    }
                }
            }
        }

        .container-top-row2 {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .container-top-row2-left {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .container-top-row2-left-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 25px;

                    .container-top-row2-left-item-name {
                        color: #858a99;
                        font-size: 24px;
                        margin-left: 10px;
                    }
                }
            }

            .container-top-row2-right {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                color: #858a99;

                .container-top-row2-right-name {
                    font-size: 24px;
                }

                .container-top-row2-right-icon {
                    font-size: 40px;
                    font-weight: 700;
                }
            }
        }
    }
}
</style>
